<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>layui-demo</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css" />
<script src="./js/jquery-2.0.3.js"></script>

<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">

		<!-- 修改物料信息 -->
		<div id="editFormDiv" style="display: none">
			<form class="layui-form" action="" lay-filter="example">

				<div class="layui-form-item">
					<label class="layui-form-label">编号</label>
					<div class="layui-input-block">
						<input type="text" name="id" id="id" lay-verify="title"
							autocomplete="off" readonly="readonly" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">物料编号</label>
					<div class="layui-input-block">
						<input type="text" name="materialid" id="materialid"
							lay-verify="title" autocomplete="off" readonly="readonly"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">物料名称</label>
					<div class="layui-input-block">
						<input type="text" name="materialname" id="materialname"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">单价</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input" name="materialprice"
							id="materialprice" onkeyup="clearNoNum(this)">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">数量</label>
					<div class="layui-input-block">
						<input type="number" name="materialnum" id="materialnum"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<select name="materialstatus" id="materialstatus"
							lay-filter="aihao">
							<option value="1">启用</option>
							<option value="0">禁用</option>
						</select>
					</div>
				</div>


				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn btn-update" type="button" lay-submit=""
							lay-filter="demo1">立即提交</button>
					</div>
				</div>
			</form>
		</div>

		<!-- 添加物料 -->
		<div id="addMat" style="display: none">
			<form class="layui-form" action="" lay-filter="example">

				<div class="layui-form-item">
					<label class="layui-form-label">物料编号</label>
					<div class="layui-input-block">
						<input type="text" name="materialid2" id="materialid2"
							lay-verify="title" autocomplete="off" readonly="readonly"
							placeholder="请输入物料编号" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">物料名称</label>
					<div class="layui-input-block">
						<input type="text" name="materialname2" id="materialname2"
							lay-verify="title" autocomplete="off" placeholder="请输入物料名"
							class="layui-input">
					</div>
				</div>

				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">单价</label>
					<div class="layui-input-block">
						<input type="text" placeholder="请输入单价" class="layui-input"
							name="materialprice2" id="materialprice2"
							onkeyup="clearNoNum(this)">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">数量</label>
					<div class="layui-input-block">
						<input type="number" name="materialnum2" id="materialnum2"
							lay-verify="title" autocomplete="off" placeholder="请输入数量"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<select name="materialstatus2" id="materialstatus2"
							lay-filter="aihao">
							<option value="1">启用</option>
							<option value="0">禁用</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn btn-update" type="button" lay-submit=""
							lay-filter="demo2">立即提交</button>
					</div>
				</div>
			</form>
		</div>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				<div class="demoTable">
					<form action="">
						物料名：
						<div class="layui-inline">
							<input class="layui-input" name="name" id="demoReload"
								autocomplete="off">
						</div>
						物料编号：
						<div class="layui-inline">
							<input class="layui-input" name="id" id="demoReload2"
								autocomplete="off">
						</div>
						物料状态：
						<div class="layui-inline">
							<select class="layui-input" name="status" id="status"
								style="height: 30px; width: 100px" lay-filter="">
								<option value=""></option>
								<option value="1">-启用-</option>
								<option value="0">-禁用-</option>
							</select>
						</div>
						物料价格区间：
						<div class="layui-inline">
							<input type="number" class="layui-input" name="minprice"
								id="minprice" autocomplete="off" style="width: 100px"
								onkeyup="clearNoNum(this)">
						</div>
						~
						<div class="layui-inline">
							<input type="number" class="layui-input" name="maxprice"
								id="maxprice" autocomplete="off" style="width: 100px"
								onkeyup="clearNoNum(this)">
						</div>
						<button type="button" class="layui-btn" data-type="reload">搜索</button>
						<button type="reset" lay-filter="formDemoreset" class="layui-btn"
							id="reset">重置</button>
				</div>
				</form>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>


	</div>


	<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
	<button class="layui-btn layui-btn-sm" lay-event="add">物料入库</button>
  </div>
</script>

	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


	<script src="./layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
		layui.use('table', function() {
			var table = layui.table;

			table.render({
				elem : '#test',//显示位置
				url : 'getmatbylike',//地址和springmvc中控制器地址一致
				toolbar : '#toolbarDemo',
				title : '物料库存',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'id',
					title : 'ID',
					width : 80,
					fixed : 'left',
					unresize : true,
					sort : true
				}, {
					field : 'materialid',
					title : '编号',
					width : 200,
					sort : true
				}, {
					field : 'materialname',
					title : '名称',
					width : 250,
					sort : true
				}, {
					field : 'materialprice',
					title : '单价',
					width : 130,
					sort : true
				}, {
					field : 'materialnum',
					title : '数量',
					width : 100,
					sort : true
				}, {
					field : 'materialdate',
					title : '变动时间',
					width : 180,
					sort : true
				}, {
					field : 'materialstatus',
					title : '状态',
					width : 120,
					templet : function(res) {
						return res.materialstatus == 0 ? "禁用" : "启用";
					}
				}, {
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 250
				} ] ],
				page : true,
				id : 'testReload',

			});

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'getCheckData':
					var data = checkStatus.data;
					layer.alert(JSON.stringify(data));
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					layer.msg('选中了：' + data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选' : '未全选');
					break;
				case 'add':
					layer.open({
						type : 1//弹出层 div
						,
						area : [ '600px', '530px' ],
						shade : 0.6,
						id : 'LAY_layuipro01' //设定一个id，防止重复弹出
						,
						//content : $("#editFormDiv").html(),
						//弹出的内容是id为addMat的div
						content : $("#addMat"), //后面不用.html()

					});
					break;
				}
				;
			});

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//console.log(obj)
				if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {

						//console.log(data); //得到的是当前行对应的数据信息
						console.log("id :" + data.id);
						$.ajax({
							type : "delete", //提交方式
							url : "delmatbyid/" + data.id, //地址和springmvc中控制器地址一致
							success : function(flag) {
								layer.msg(flag == true ? "删除成功！" : "删除失败！", {
									time : 2000
								//两秒延迟
								}, function() {
									if (flag == true) {
										//obj.update(); ?? 理想
										//layer.close(index);;
										parent.layer.closeAll();//关闭所有,简单粗暴
										window.location.reload();//刷新当前页面
									}

								});

							}
						});

					});
				} else if (obj.event === 'edit') {

					//先给我们的表单元素赋值
					$("#id").attr("value", data.id);
					$("#materialid").attr("value", data.materialid);
					$("#materialname").attr("value", data.materialname);
					$("#materialprice").attr("value", data.materialprice);
					$("#materialnum").attr("value", data.materialnum);
					//设置select的选中项
					$(
							"#materialstatus option[value='"
									+ data.materialstatus + "']").attr(
							'selected', 'selected');
					console.log($("#materialstatus").val());

					//地址文本域 <textarea> 文字....</textarea>
					//等级
					layer.open({
						type : 1//弹出层 div
						,
						area : [ '600px', '530px' ],
						shade : 0.6,
						id : 'LAY_layuipro' //设定一个id，防止重复弹出
						,
						//content : $("#editFormDiv").html(),
						content : $("#editFormDiv"), //后面不用.html()

					});

					//表单的render
					layui.form.render();

					/* layer.prompt({
						formType : 2,
						//value : data.userName //.email
						value : JSON.stringify(data)
					}, function(value, index) {
						obj.update({
							email : value
						});
						layer.close(index);
					}); */
				}
			});

			/*表格数据重载 模糊检索*/
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');
					var demoReload2 = $('#demoReload2');
					var status = $('#status');
					var minprice = $('#minprice');
					var maxprice = $('#maxprice');

					var min = $('#minprice').val();
					var max = $('#maxprice').val();
					if (min > max) {
						layer.msg("最小价格不能大于最大价格");
						$('#maxprice').val($('#minprice').val());
						return false;
					}
					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : { //检索的条件
							keywords : demoReload.val(),
							materialid : demoReload2.val(),
							materialstatus : status.val(),
							minprice : minprice.val(),
							maxprice : maxprice.val()
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			/*修改 表单的提交 按钮的单击事件 ，监听1 */
			/* $(document).on("click", ".btn-update", function() {
				//可以实现 比较麻烦....
				console.log(layui.form.data);
			});  */

			//修改
			//监听提交  新增加的代码  监听2
			layui.form.on('submit(demo1)', function(data) {
				/* layer.alert(JSON.stringify(data.field), {
					title : '最终的提交信息'
				}) */
				//表单中的数据 进行转换，得到一个json格式的字符串
				//console.log(JSON.stringify(data.field));
				//ajax请求实现访问控制器
				$.ajax({
					type : "put", //提交方式
					url : "updmatbyid", //地址和springmvc中控制器地址一致
					data : JSON.stringify({
						id : $("#id").val(),
						materialid : $("#materialid").val(),
						materialname : $("#materialname").val(),
						materialprice : $("#materialprice").val(),
						materialnum : $("#materialnum").val(),
						materialstatus : $("#materialstatus").val(),
					}), //提交给控制器的数据
					contentType : "application/json", //提交给控制的数据 格式
					success : function(flag) {
						layer.msg(flag == true ? "修改成功！" : "修改失败！", {
							time : 2000
						//两秒延迟
						}, function() {
							if (flag == true) {
								//obj.update(); ?? 理想
								//layer.close(index);;
								parent.layer.closeAll();//关闭所有,简单粗暴
								window.location.reload();//刷新当前页面
							}

						});
					}
				});

				return false;
			});

			//增加
			//监听提交  新增加的代码  监听3
			layui.form.on('submit(demo2)', function(data) {

				/* layer.alert(JSON.stringify(data.field), {
					title : '最终的提交信息'
				}) */
				//表单中的数据			
				console.log($("#materialid2").val());
				console.log($("#materialname2").val());
				console.log($("#materialprice2").val());
				console.log($("#materialnum2").val());
				console.log($("#materialstatus2").val());

				//ajax请求实现访问控制器
				$.ajax({
					type : "post", //提交方式
					url : "addmat", //地址和springmvc中控制器地址一致
					//将表单中的数据 进行转换，得到一个json格式的字符串
					data : JSON.stringify({ //提交给控制器的数据
						materialid : $("#materialid2").val(),
						materialname : $("#materialname2").val(),
						materialprice : $("#materialprice2").val(),
						materialnum : $("#materialnum2").val(),
						materialstatus : $("#materialstatus2").val(),
					}),
					contentType : "application/json", //提交给控制器的数据 格式
					success : function(flag) {
						layer.msg(flag == true ? "增加成功！" : "增加失败！", {
							time : 2000
						//两秒延迟
						}, function() {
							if (flag == true) {
								//obj.update(); ?? 理想
								//layer.close(index);;
								parent.layer.closeAll();//关闭所有,简单粗暴
								window.location.reload();//刷新父页面
							}

						});

					}
				});

				return false;
			});

		});
	</script>


	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
		var isShow = true; //定义一个标志位
		$('.kit-side-fold').click(function() {
			//选择出所有的span，并判断是不是hidden
			$('.layui-nav-item span').each(function() {
				if ($(this).is(':hidden')) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
			//判断isshow的状态
			if (isShow) {
				$('.layui-side.layui-bg-black').width(60); //设置宽度
				$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
				//将footer和body的宽度修改
				$('.layui-body').css('left', 60 + 'px');
				$('.layui-footer').css('left', 60 + 'px');
				//将二级导航栏隐藏
				$('dd span').each(function() {
					$(this).hide();
				});
				//修改标志位
				isShow = false;
			} else {
				$('.layui-side.layui-bg-black').width(200);
				$('.kit-side-fold i').css('margin-right', '10%');
				$('.layui-body').css('left', 200 + 'px');
				$('.layui-footer').css('left', 200 + 'px');
				$('dd span').each(function() {
					$(this).show();
				});
				isShow = true;
			}
		});
	</script>
	<script type="text/javascript">
		//设定价格的输入格式
		//当用户释放键盘按钮时执行的Javascript代码
		function clearNoNum(obj) {
			//先把非数字的都替换掉，除了数字和.""
			obj.value = obj.value.replace(/[^\d.]/g, "");
			//必须保证第一个为数字而不是.
			obj.value = obj.value.replace(/^\./g, "");
			//保证只有出现一个.而没有多个.
			obj.value = obj.value.replace(/\.{2,}/g, ".");
			//保证.只出现一次，而不能出现两次以上
			obj.value = obj.value.replace(".", "$#$").replace(/\./g, "")
					.replace("$#$", ".");
		}
	</script>

	<script type="text/javascript">
		$(function() {
			//点击文本框，自动生成一个物料编号
			$("#materialid2").click(
					function() {

						var text = "WL";
						var date = new Date();
						var month = null;
						var tian = null;
						var hour = null;
						var minute = null;
						var second = null;

						//获取月份
						if (date.getMonth() < 10) {
							var month = "0" + (date.getMonth() + 1);

						} else {
							var month = date.getMonth() + 1;
						}

						//获取日期
						if (date.getDate() < 10) {
							var tian = "0" + date.getDate();

						} else {
							var tian = date.getDate();
						}

						//获取小时
						if (date.getHours() < 10) {
							var hour = "0" + date.getHours();

						} else {
							var hour = date.getHours();
						}

						//获取分钟
						if (date.getMinutes() < 10) {
							var minute = "0" + date.getMinutes();

						} else {
							var minute = date.getMinutes();
						}

						//获取秒数
						if (date.getSeconds() < 10) {
							var second = "0" + date.getSeconds();

						} else {
							var second = date.getSeconds();
						}

						var wlid = text + date.getFullYear() + month + tian
								+ hour + minute + second;

						$("#materialid2").val(wlid);

					});

		})
	</script>

</body>
</html>